<style>
</style>
<!--  -->
<template>
  <li>
    <div class="title white"><a class="nohover">容器设置</a></div>
    <div class="li-child white">
      <ul class="child-ul">
        <li>
          <div class="title"><a class="nohover"> 主容器编辑 </a></div>
          <div class="last-child white">
            <ul class="child-ul">
              <li>
                <div class="title">
                  <a :class="{'disable':parseInt(mainbox) === 1}" @click.stop="openMainbox">开启</a>
                  <span class="nbsp4"></span>
                  <a :class="{'disable':parseInt(mainbox) === 0}" @click.stop="closeMainbox">关闭</a>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <div class="title"><a class="nohover"> 栅格编辑 </a></div>
          <div class="last-child white">
            <ul class="child-ul">
              <li>
                <div class="title">
                  <a :class="{'disable':parseInt(col) === 1}" @click.stop="openCol">开启</a>
                  <span class="nbsp4"></span>
                  <a :class="{'disable':parseInt(col) === 0}" @click.stop="closeCol">关闭</a>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <div class="title"><a class="nohover"> 容器编辑 </a></div>
          <div class="last-child white">
            <ul class="child-ul">
              <li>
                <div class="title">
                  <a :class="{'disable':parseInt(box) === 1}" @click.stop="openBox">开启</a>
                  <span class="nbsp4"></span>
                  <a :class="{'disable':parseInt(box) === 0}" @click.stop="closeBox">关闭</a>
                </div>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
</template>

<script>
import * as WindowType from '@/config/windowtype.js'
import storage from '@/core/storage.js'
import VueFunctions from '@/core/VueFunctions.js'
import { mapState } from 'vuex'
export default {
  props: {
    changeIsOptFixed: {
      type: Function
    }
  },
  created () {
    VueFunctions.method(WindowType.GET_CONTAINER_MAINBOX_NOHOVER, () => {
      return this.mainbox
    })
    VueFunctions.method(WindowType.GET_CONTAINER_COL_NOHOVER, () => {
      return this.col
    })
    VueFunctions.method(WindowType.GET_CONTAINER_BOX_NOHOVER, () => {
      return this.box
    })
    let mainbox = storage.getItem(WindowType.GET_CONTAINER_MAINBOX_NOHOVER)
    if (mainbox === null) {
      storage.setItem(WindowType.GET_CONTAINER_MAINBOX_NOHOVER, 1)
      mainbox = storage.getItem(WindowType.GET_CONTAINER_MAINBOX_NOHOVER)
    }
    this.mainbox = mainbox

    let col = storage.getItem(WindowType.GET_CONTAINER_COL_NOHOVER)
    if (col === null) {
      storage.setItem(WindowType.GET_CONTAINER_COL_NOHOVER, 1)
      col = storage.getItem(WindowType.GET_CONTAINER_COL_NOHOVER)
    }
    this.col = col

    let box = storage.getItem(WindowType.GET_CONTAINER_BOX_NOHOVER)
    if (box === null) {
      storage.setItem(WindowType.GET_CONTAINER_BOX_NOHOVER, 1)
      box = storage.getItem(WindowType.GET_CONTAINER_BOX_NOHOVER)
    }
    this.box = box
  },
  mounted () {
  },
  computed: {
    ...mapState([
      'design'
    ])
  },
  data () {
    return {
      mainbox: null,
      col: null,
      box: null
    }
  },
  watch: {
    mainbox: {
      handler () {
        storage.setItem(WindowType.GET_CONTAINER_MAINBOX_NOHOVER, this.mainbox)
        this.changeIsOptFixed(this.mainbox, this.col, this.box)
      },
      deep: true
    },
    col: {
      handler () {
        storage.setItem(WindowType.GET_CONTAINER_COL_NOHOVER, this.col)
        this.changeIsOptFixed(this.mainbox, this.col, this.box)
      },
      deep: true
    },
    box: {
      handler () {
        storage.setItem(WindowType.GET_CONTAINER_BOX_NOHOVER, this.box)
        this.changeIsOptFixed(this.mainbox, this.col, this.box)
      },
      deep: true
    }
  },
  methods: {
    // this.design.ref.contentWindow.vueFunc.addContainerMainBox(this.form)
    openMainbox () {
      this.mainbox = 1
      // this.design.ref.contentWindow.vueFunc.mainboxRemoveNohvoer()
    },
    closeMainbox () {
      this.mainbox = 0
      // this.design.ref.contentWindow.vueFunc.mainboxAddNohvoer()
    },
    openCol () {
      this.col = 1
      // this.design.ref.contentWindow.vueFunc.colRemoveNohvoer()
    },
    closeCol () {
      this.col = 0
      // this.design.ref.contentWindow.vueFunc.colAddNohvoer()
    },
    openBox () {
      this.box = 1
      // this.design.ref.contentWindow.vueFunc.boxRemoveNohvoer()
    },
    closeBox () {
      this.box = 0
      // this.design.ref.contentWindow.vueFunc.boxAddNohvoer()
    }
  }
}

</script>
